<template>
    <div class="search-result-container">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <van-cell v-for="(article,index) in searchResultLists" :key="index" :title="article.title" />
        </van-list>
    </div>
</template>

<script>
import { reqSearchResult } from '@/api/search'
    export default {
        name:'searchResult',
        props:{
            searchText:{
                type: String,
                required: true
            }
        },
        data() {
            return {
                searchResultLists: [],
                loading: false,
                finished: false,
                page: 1, //请求的页码
                perPage: 10, //请求的每页的数据大小
            }
        },
        methods: {
            async onLoad() {
                // 1. 请求数据
                const { data } = await reqSearchResult({
                    page: this.page,  //请求页码
                    per_page: this.perPage, //请求的每页的条数
                    q: this.searchText  // 请求的关键词
                })
                // console.log(data)

                // 2. 把数据赋值给列表
                const { results } = data.data
                this.searchResultLists.push(...results)

                // 3. 把关闭加载 this.loading = false
                this.loading = false

                // 4. 判断是否还有下一页数据
                if(results.length){
                    //   假如有，加载下一页数据
                    this.page++;
                }else{
                    //   假如没有,则设置 this.finished = true
                    this.finished = true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.search-result-container{
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}
</style>